<template>
  <div>
    <button @click="handleAddLi">显示/隐藏</button>
    <transition-group tag="ul">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const items = reactive([
  {
    id: 1,
    text: 'test1'
  },
  {
    id: 2,
    text: 'test2'
  }
])

const handleAddLi = () => {
  items.push({
    id: items.length + 1,
    text: 'test' + (items.length + 1)
  })
}

</script>

<style scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>